<template>
  <div>
    <van-nav-bar class="title" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="guide-o" size="18" color="#fff" />
      </template>
      <template #title>
        <van-search
          class="search"
          v-model="value"
          placeholder="请输入小区或地址"
          background="none"
        >
          <template #label>
            <div @click="onSearch">{{ huoqu.label }}</div>
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item title="区域" @open="openFn('quyu')">
        <van-picker
          show-toolbar
          @confirm="confirmFn"
          ref="area"
          :columns="columns3"
          toolbar-position="bottom"
        />
      </van-dropdown-item>
      <van-dropdown-item title="方式" @open="openFn('fangshi')">
        <van-picker
          show-toolbar
          @confirm="confirmFn"
          ref="ways"
          :columns="columns1"
          toolbar-position="bottom"
        />
      </van-dropdown-item>
      <van-dropdown-item title="租金" @open="openFn('zujin')">
        <van-picker
          show-toolbar
          @confirm="confirmFn"
          :columns="columns2"
          ref="money"
          toolbar-position="bottom"
        />
      </van-dropdown-item>
      <van-dropdown-item title="筛选" @open="openFn('shaixuan')">
        <van-popup
          v-model="show"
          position="right"
          :style="{ height: '100%', width: '80%' }"
        >
          <div>
            <span class="huxing">户型</span>
            <van-grid :column-num="2">
              <!-- <template v-slot:text></template> -->
              <van-grid-item
                v-for="item in roomType"
                :key="item.value"
                @click="Fn($event)"
              >
                {{ item.label }}
              </van-grid-item>
            </van-grid>
          </div>
          <div>
            <span class="hx">朝向</span>
            <van-grid :column-num="2">
              <van-grid-item v-for="item in oriented" :key="item.value"  @click="Fn($event)">
                {{ item.label }}
              </van-grid-item>
            </van-grid>
          </div>
          <div>
            <span class="hx">楼层</span>
            <van-grid :column-num="2">
              <van-grid-item v-for="item in floor" :key="item.value"  @click="Fn($event)">
                {{ item.label }}
              </van-grid-item>
            </van-grid>
          </div>
          <div>
            <span class="hx">房屋亮点</span>
            <van-grid :column-num="2">
              <van-grid-item v-for="item in characteristic" :key="item.value"  @click="Fn($event)">
                {{ item.label }}
              </van-grid-item>
            </van-grid>
          </div>
          <div class="btn">
            <van-button type="default" class="anniu">清除</van-button>
            <van-button type="primary" class="anniu" @click="confirmFn">确定</van-button>
          </div>
        </van-popup>
      </van-dropdown-item>
    </van-dropdown-menu>
    <listrender :list="list"></listrender>
  </div>
</template>

<script>
import request from '@/utils/request'
import listrender from '@/components/listrender.vue'
import {getItem, key} from '@/utils/storage.js'
export default {
  name: 'HaokeFindhouse',

  data () {
    return {
      list: [],
      value: '',
      conlist: [],
      columns1: [],
      columns2: [],
      areaList: [],
      rentType: null,
      price: null,
      areaValue: null,
      subwayValue: null,
      openVal: 'quyu',
      show: false,
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: []
    }
  },
  components: {
    listrender
  },
  computed: {
    huoqu () {
      return getItem(key)
    },
    columns3 () {
      const Str = JSON.stringify(this.areaList).replace(/"label"/g, '"text"')
      // console.log(Str)
      const result = Str.replace(
        /"value":"null"/,
        '"value":"null","children":[{"text":"不限","value":"null"}]'
      )
      return JSON.parse(result)
    }
  },
  created () {
    this.getCollectList()
    this.getCondition()
  },
  methods: {
    Fn (e) {
      console.log(e)
      if (e.target.classList[3] === undefined) {
        e.target.classList.add('active')
      } else {
        e.target.classList.remove('active')
      }
    },
    onSearch () {},
    async getCollectList () {
      let id = ''
      const arr = []
      arr.push(getItem(key))
      arr.forEach((item) => {
        id = item.value
      })
      const res = await request({
        url: '/houses',
        params: {
          cityid: id,
          start: 1,
          end: 20
        }
      })
      console.log(res)
      this.list = res.body.list
    },
    async getCondition () {
      const res = await request({
        url: '/houses/condition',
        params: {
          id: getItem(key).value
        }
      })
      console.log(res)
      this.roomType = res.body.roomType
      this.oriented = res.body.oriented
      this.floor = res.body.floor
      this.characteristic = res.body.characteristic
      this.conlist = res.body.price
      console.log(this.conlist)
      this.columns2 = res.body.price.map((item) => {
        return item.label
      })
      this.columns1 = res.body.rentType.map((item) => {
        return item.label
      })
      this.areaList.push(res.body.area, res.body.subway)
    },
    openFn (val) {
      // console.log(val)
      this.openVal = val
      if (this.openVal === 'shaixuan') {
        this.show = true
      }
    },
    // 给确认按钮绑定确认事件(因为区域/方式/租金是同一个按钮,所以需要通过open方法进行传参来判断是哪个按钮)
    // 绑定确认事件的目的是点击确定按钮,获取接口的参数,才能发送请求,获取数据,进而渲染页面
    async confirmFn () {
      // 如果点击的是区域按钮的确认的话,这边进行区域这块逻辑的编写
      if (this.openVal === 'quyu') {
        // getValues()这个方法可以获取对应的值
        const area = this.$refs.area.getValues()
        // console.log(area)
        // 如果点击的是区域的话,需要根据数据进行判断
        // 为的是给areaValue重新赋值
        if (area[0].text === '区域') {
          if (area[2].value === 'null') {
            this.areaValue = area[1].value
          } else if (area[1].value === 'null') {
            this.areaValue = area[0].value
          } else {
            this.areaValue = area[2].value
          }
          // 如果点击的是另外一个地铁的话,走下面的逻辑
        } else {
          if (area[2].value === 'null') {
            this.subwayValue = area[1].value
          } else if (area[1].value === 'null') {
            this.subwayValue = area[0].value
          } else {
            this.subwayValue = area[2].value
          }
        }
        // 处理方式的逻辑
      } else if (this.openVal === 'fangshi') {
        const ways = this.$refs.ways.getValues()
        // console.log(ways)
        if (ways[0] === '整租') {
          this.rentType = true
        } else if (ways[0] === '合租') {
          this.rentType = false
        }
        // 处理租金的逻辑
      } else if (this.openVal === 'zujin') {
        const money = this.$refs.money.getValues()
        // console.log(money)
        // eslint-disable-next-line array-callback-return
        const newArr = this.conlist.filter((item) => {
          console.log(item)
          if (money[0] === item.label) {
            return item
          }
        })
        console.log(newArr)
        this.price = newArr[0].value
      } // 处理筛选的逻辑
      // else {

      // }
      const result = await request({
        url: '/houses',
        params: {
          cityId: getItem(key).value,
          start: 1,
          end: 20,
          area: this.areaValue,
          subway: this.subwayValue,
          rentType: this.rentType,
          price: this.price
        }
      })
      console.log(result)
      this.list = result.body.list
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.active {
  background-color: #a6d7bb;
}
/deep/.van-search {
  background-color: #fff;
}
.title {
  background-color: #56b27b;
}
/deep/ .van-nav-bar__left .van-icon {
  color: #fff;
}
.title {
  position: relative;
  .search {
    position: absolute;
    top: 10px;
    left: 5px;
    z-index: 99999;
    width: 310px;
    height: 34px;
    margin-left: 30px;
    margin-top: -5px;
  }
}
.huxing {
  display: block;
  margin-top: 100px !important;
  font-size: 20px;
}
.hx {
  display: block;
  margin-top: 30px !important;
  font-size: 20px;
}
/deep/.van-grid-item__content {
  color: #666;
  font-size: 12px;
}
.btn {
  position: sticky;
  bottom: 0;
  width: 100%;
  .anniu{
    width: 50%;
  }
}
</style>
